<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的三种位置</title>
<!--
    元素选择器优先级:
        行内样式 - 优先级最高
    内部样式和外部样式优先级:
        遵循谁先设置谁不生效 谁后设置谁生效
        后写的样式会将先写的样式覆盖掉
    强行提高优先级:
        1.临时提高 在网页控制台中点击某行HTML代码内容显示详细内容 取消已勾选的配置可进行临时更换页面显示优先级作用
        2.!important 单值缀值 跟在指定属性后 强行提高优先级至最高级 但是不建议使用 会破坏原有的CSS代码
-->
<!--
    作用范围
    行内样式是最小的
    外部样式是最大的
-->
<!--
    3.CSS外部样式
    利用外部.css文件 将外部.css中的样式代码引入目标.html文件进行样式调整
    link标签: 链入外部文件标签
    rel="": 链入外部文件的类型 必写属性
    href="": 链入外部文件的路径
-->
    <link rel="stylesheet" href="Demo.css">
<!--
    2.CSS内部样式
    在head标签中添加style标签
    对当前页面所有被选中的元素生效
    选中格式: 目标元素名 + {}
    在{}中对其进行整体设置
-->
<!--background-color: 背景色-->
<!--stylesheet: 样式表文件-->
    <style>
        p {
            color: aqua;
        }
        h4 {
            background-color: bisque;
            color: blue;
        }
    </style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<div>我是div</div>
<hr>
<h4>我是标题</h4>
<!--
    1.CSS行内样式 加在当前行元素上 并且只对当前行元素生效
    应用较少 使用方式繁琐
-->
<h4 style="color: deeppink;background-color: blueviolet">我是标题</h4>
<h4>我是标题</h4>
<hr>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>